<template>
	<tm-fullView>
		<tm-menubars title="滑块" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				基础示例
			</view>
			<tm-slider v-model="num2"></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				改变最大值和颜色
			</view>
			<tm-slider color="bg-gradient-pink-accent" :max="200" v-model="num1" show-right show-left></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				自定义slot插槽,始终显示信息标签
			</view>
			<tm-slider showTip color="bg-gradient-orange-accent" :max="100" v-model="num" show-right show-left>
				<template v-slot:left="{data}">
					<view>
						<view>{{data.value}}</view>
						<view>价格</view>
					</view>
				</template>
				<template v-slot:tips="{data}">
					<view><tm-icons color="white" dense name="icon-position-fill"></tm-icons></view>
					
				</template>
				<template v-slot:right="{data}">
					<view>
						<view>{{data.max}}</view>
						<view>最大</view>
					</view>
				</template>
			</tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				刻度尺
			</view>
			<tm-slider color="bg-gradient-green-accent" :step="10" v-model="num"></tm-slider>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				竖向刻度尺
			</view>
			<tm-slider  :vertical="true" color="bg-gradient-red-accent"  v-model="num"></tm-slider>
		</tm-sheet>
		
		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSlider from "@/tm-vuetify/components/tm-slider/tm-slider.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSlider,tmIcons},
		data() {
			return {
				num:0,
				num2:0,
				num1:0,
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
